<template>
  <div class="container">
    <div class="title">
      共有
      <span class="f_c_f">{{count}}</span>位客户
    </div>
    <div class="content" v-for="(item,index) in lists" :key="index" @click="c_list(item)">
      <!-- <img :src="item.avatarUrl" alt="" class="img2"> -->
      <figure style="" class="flex_c_c_c img">
        <img :src="item.avatarUrl" alt="" style="border-radius: 40px;width:100%;">
      </figure>

      <div class="content_right bor-b-e9e9e9">
        <ul>
          <li class="f_s_28 ellipsis w_3">{{item.nickName}}</li>
          <li class="f_c_f">{{item.markVal}}</li>
        </ul>
        <ul class="f_c_bf" v-if="tabIndex == 1">
          <li>成交单量:{{item.order}}</li>
          <li>成交金额:{{item.money}}</li>
        </ul>
        <ul class="f_c_bf" v-else>
          <li>AI成交率{{item.rate}}%</li>
          <li>预计成交时间:{{item.date == 0?'未设置':item.date}}</li>
        </ul>
      </div>
    </div>
    <Loading v-show="LoadingShow"></Loading>
  </div>
</template>

<script>
import Common from "../assets/js/common.js";
let Mycommon = new Common();
import Loading from "./common/Loading.vue";

export default {
  components: { Loading },
  data() {
    return {
      LoadingShow: true,
      lists: [],
      tabIndex: 0,
      page: 1,
      total_page: "",
      count: 0
    };
  },
  computed: {
    vuexData() {
      return this.$store.state.SalesRankData;
    }
  },
  created() {
    // console.log(this.$route.params.item)
    let params = this.vuexData;
    this.staff_id = params.item.fans_id;
    this.tabIndex = params.index;
    this.name = params.item.name;
  },
  mounted() {
    this.postData();
    let that = this;
    window.onscroll = function() {
      let h1;
      let h2;
      let h3;
      let h4;
      if (document.body.scrollTop > 0) {
        h1 = document.body.scrollTop;
        h2 = document.documentElement.clientHeight;
        h3 = h1 + h2 + 50;
        h4 = document.documentElement.scrollHeight;
      } else {
        h1 = document.documentElement.scrollTop;
        h2 = document.documentElement.clientHeight;
        h3 = h1 + h2 + 50;
        h4 = document.documentElement.scrollHeight;
      }
      if (h3 > h4) {
        if (that.total_page > that.page) {
          that.page++;
          that.postData();
        }
      }
    };
  },
  methods: {
    c_list(item) {
      this.$router.push({
        name: "C_details",
        params: {
          item: item,
          staff_id: this.staff_id,
          name: this.name
        }
      });
    },
    postData() {
      let that = this;
      let data = {
        staff_id: this.staff_id,
        page: that.page
      };
      let url = "clientList";
      Mycommon.http({
        url: url,
        data: data,
        success(res) {
          let list = res.data.data.list;
          that.LoadingShow = false;
          //  console.log(res)
          that.total_page = res.data.data.total_page;

          list.forEach(val => {
            val.avatarUrl =
              val.avatarUrl ||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png";
            if (val.mark == 0) {
              val.markVal = "从未跟进";
            } else if (val.mark == 1) {
              val.markVal = "跟进中";
            } else if (val.mark == 2) {
              val.markVal = "已成交";
            }
          });

          if (that.lists[0]) {
            list.forEach(val => {
              that.lists.push(val);
            });
          } else {
            that.count = res.data.data.total_count;
            that.lists = list;
          }
          
        }
      });
    }
  }
};
</script>

<style scoped>
.f_s_28 {
  font-size: 28px;
}
.f_c_f {
  color: #fc1111;
}
.f_c_bf {
  color: #bfbfbf;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
}
.content {
  display: flex;
  width: 100vw;
  height: 120px;
  background: #fff;
  align-items: center;
}
.img {
  width: 84px;
  height: 84px;
  margin: 0 20px;
  border-radius: 40px;
}
.content_right {
  display: flex;
  flex: 1;
  height: 120px;
  justify-content: space-between;
  align-items: center;
}
</style>
